<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>权限列表</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <script src="${path}/js/jquery.min.js"></script>
    <script src="${path}/layui/layui.js"></script>
</head>
<style>
    #update{
        display: none;
        padding: 30px 50px 0 50px;
    }
</style>
<body>
    <div id="update">
        <form class="layui-form" lay-filter="functionForm" id="functionForm" action="" style="padding:15px 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">父权限</label>
                <div class="layui-input-block" >
                    <input type="text" id="function" value="一级权限" disabled class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">功能名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" autofocus required lay-verify="required" placeholder="请输入功能编码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">功能类型:</label>
                <div class="layui-input-block">
                    <input type="text" name="type" id="type" required lay-verify="required" placeholder="请输入功能名称" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">功能Url:</label>
                <div class="layui-input-block">
                    <input type="text" name="url" id="url" required lay-verify="required" placeholder="请输入功能URL" autocomplete="off" class="layui-input">
                </div>
            </div>
            <%--是否可用--%>
            <input type="hidden" name="available" value="1">
            <%--编号--%>
            <input type="hidden" name="id" id="id">
            <%--父级id--%>
            <input type="hidden" name="parentid" id="bianhao">
        </form>
        <script>

        </script>
    </div>
<h2>权限列表</h2>
<hr>
<table id="permissionTable" lay-filter="permissionTable"></table>

<script type="text/javascript">
    layui.config({
        base: '${path}/layui/lay/modules/'
    }).extend({
        treeGrid: 'treeGrid'
    });

    function reload() {
        layui.use('treeGrid',function () {
            var treeGrid = layui.treeGrid;
            $.get("${path}/permission/list",function (d) {
                $.each(d.data,function () {
                    this.isOpen = false;
                });
                treeGrid.render({
                    id : 'perTable',
                    elem : '#permissionTable',
                    data : d.data,
                    idField : 'id',
                    treeId : 'id',
                    treeUpId : 'parentid',
                    treeShowName : 'name',
                    toolbar:'#toolbarDemo',
                    cols : [[
                        {field:'name', title:'权限名称'},
                        {field:'type', title:'权限类型'},
                        {field:'url', title:'连接地址'},
                        {toolbar:'#barDemo', title:'操作'}
                    ]]
                });
                treeGrid.on('tool(permissionTable)',function (obj) {
                    var e = obj.event;
                    var data=obj.data
                    switch (e){
                        case "add": //增加
                            layer.open({
                                type: 1,
                                title: "增加权限",
                                skin: "layui-layer-molv",
                                anim: 0,
                                area: "800px",
                                content: $("#update"),
                                btn: ['确定','取消'],
                                success:function(){
                                    $("#bianhao").val(data.id);
                                    $("#function").val(data.name);
                                    $("#name").val("");
                                    $("#type").val("");
                                    $("#url").val("");
                                },
                                yes : function (index) {
                                    var str=$("#functionForm").serialize();
                                    console.log(str)
                                    $.post("${path}/permission/addmenu",str,function (){
                                        layer.msg("添加成功...",{time:1200})
                                        layer.close(index);
                                        reload();
                                    });
                                }
                            })
                            break;
                        case "update": //修改
                            layer.open({
                                type: 1,
                                title: "修改",
                                skin: "layui-layer-molv",
                                anim: 0,
                                area: "800px",
                                content: $("#update"),
                                btn: ['确定','取消'],
                                success:function(){
                                    $("#id").val(data.id);
                                    $("#name").val(data.name);
                                    $("#type").val(data.type);
                                    $("#url").val(data.url);
                                },
                                yes : function (index) {
                                    var str=$("#functionForm").serialize();
                                    console.log(str)
                                    $.post("${path}/permission/update",str,function (){
                                        layer.msg("修改成功...",{time:1200})
                                        layer.close(index);
                                        reload();
                                    });
                                }
                            })
                            break;
                        case "del":
                            layui.form.render();
                            layer.open({
                                time:0,
                                title:'友情提示',
                                content:'确定要删除此行数据吗？',
                                offset:"260px",
                                shade:[0.3,'#000'],
                                btn:['确定','取消'],
                                success:function(){
                                   // alert(data.parentid)
                                },
                                yes:function () {
                                    $.post("${path}/permission/getzi",{id:data.id},function (date) {
                                        if(date.code==1){
                                            layer.msg("该权限包含其他权限，无法删除...",{time:1200})
                                        }else if(date.code==0){
                                            $.post("${path}/permission/del",{id:data.id},function () {
                                                layer.msg("删除成功...",{time:1200})
                                                reload();
                                            })
                                        }
                                    })
                                }
                            })
                            break;
                    }
                })
            })

        });
    }


    reload();
    //  layui渲染
    var table;
    layui.use(['table','form'], function () {
        table = layui.table;
        var form = layui.form;

        layui.form.render();
    })
    function add() {
        layer.open({
            type: 1,
            title: "增加权限",
            skin: "layui-layer-molv",
            anim: 0,
            area: "800px",
            content: $("#update"),
            btn: ['确定','取消'],
            success:function(){
                $("#name").val("");
                $("#type").val("");
                $("#url").val("");
            },
            yes : function (index) {
                var str=$("#functionForm").serialize();
                $.post("${path}/permission/add",str,function (){
                    layer.msg("添加成功...",{time:1200})
                    layer.close(index);
                    reload();
                });
            }
        })
    }
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="add();"><i class="layui-icon layui-icon-add-circle"></i> 添加一级权限</button>
    </div>
</script>
<!-- 增加、修改、删除  -->
<script type="text/html" id="barDemo">
    <a lay-event="add" title="处理" style="cursor: pointer;padding-left: 5px;"><span class="layui-icon layui-icon-add-circle"></span></a>
    <a lay-event="update" title="修改" style="cursor: pointer;padding-left: 10px;"><span class="layui-icon layui-icon-edit"></span></a>
    <a lay-event="del" title="删除" style="cursor: pointer;padding-left: 10px;"><span class="layui-icon layui-icon-delete"></span></a>
</script>
</body>
</html>
